<template>
    <div>
        <p>
            用户名：
            <input type="text" v-model.lazy="name">
        </p>
        <p>{{tip}}</p>
    </div>
</template>

<script>
import { setup, ref, watch } from 'vue';
export default {
    setup() {
        const name = ref("");
        const  tip = ref("");
        watch(name, (newValue, oldValue) => {
            console.log('旧值是：${oldValue}，新值是${newValue}');
            setTimeout(function() {
                if (newValue == "admin") {
                    tip.value ="已存在";
                } else {
                    tip.value = "可使用";
                }
            }, 1000)
        })
        return {
            name,
            tip
        }
    }
}
</script>

<style>

</style>